<template>
	<view class="">
		<commonHeader :showBack="true" :navigationBarStyle="{iconText:'历史访问店铺'}">
		</commonHeader>
		<view class="page-content" :style="{'padding-top': lineHeight + 118 + 'rpx'}">
			<view class="tabs" :style="{'top': lineHeight + 'rpx'}">
				<u-search shape="square" v-model="shopName" @search="queryList" @custom="queryList"></u-search>
			</view>
			<view class="" v-for="item in list">
				<view class="align-center justify-between detail" @click.stop="switchTabHome(item)">
					<img :src="item.shopLogo" alt="" class="avatar">
					<view class="content">
						<view class="line-1">
							{{item.shopName}}
						</view>
						<view class="line-1">
							{{item.shopBrief}}
						</view>
					</view>
					<img src="/static/icon/shopCar/icon_shezhi@2x.png" alt="" class="set-store"
						@click.stop="showActionSheetFn(item)">
				</view>
			</view>
			<view class="load-more" v-if="list.length >= total">
				已经到底啦~
			</view>
		</view>
		<u-action-sheet :actions="actionList" :closeOnClickOverlay="true" :closeOnClickAction="true"
			:show="showActionSheet" :safeAreaInsetBottom="true" :round="10" cancelText='取消' @select="selectAtionSheet"
			@close="showActionSheet = false">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				count: 0,
				showCoupon: false,
				showOrderSuccessfullyModal: false,
				list: [],
				getSettlement: null,
				orderId: '',
				state: 0,
				total: 0,
				allBussiness: 0,
				page: 1,
				pageSize: 10,
				lineHeight: 0,
				shopName: '',
				actionList: [{
						name: '置顶',
						index: 0
					},
					{
						name: '移除记录',
						index: 1
					}
				],
				showActionSheet: false,
				acitonItem: null
			}
		},
		onLoad(e) {
			console.log(e, 'e.orderId');
			this.queryList()
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
				ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
				ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
				ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
			}
			// 底部tabBar的高度
			systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems
				.ktxWindowHeight // 底部tabBar的高度
			this.lineHeight = systems.ktxStatusHeight + 84;
		},
		methods: {
			remove() {
				this.$http.delete("userShop/visit/remove/" + this.acitonItem.id, ).then((res) => {
					uni.showToast({
						title: '移除成功',
						icon: 'none',
					})
					this.showActionSheet = false
					this.queryList()
				});
			},
			saveOrUpdate() {
				const params = {
					shopId: this.acitonItem.shopId,
					isTop: 1
				}
				this.$http.post("userShop/visit/saveOrUpdate", params).then((res) => {
					uni.showToast({
						title: '置顶成功',
						icon: 'none',
					})
					this.showActionSheet = false
					this.queryList()
				});
			},
			selectAtionSheet(i) {
				if (i.index == 0) {
					this.saveOrUpdate()
				} else {
					this.remove()
				}
				console.log(i);
			},
			showActionSheetFn(item) {
				this.showActionSheet = true
				this.acitonItem = item
				console.log(item);
			},
			queryList() {
				const params = {
					keyword: this.shopName
				}
				this.$http.get("userShop/visit/queryList", params).then(res => {
					this.list = res
					console.log(this.list, '123');
					console.log(this.list.length, '123');
				})
			},
			pushOrderDetail(item) {
				console.log(item, 'submitData');
				uni.navigateTo({
					url: '/pages/order/orderDetail?orderId=' + item.orderId,
				});
			},
			switchTabHome(item) {
				console.log(item);
				uni.switchTab({
					url: '/pages/home/home',
					success: function(e) {
						var page = getCurrentPages()[0]
						if (page == undefined || page == null) return;
						page.onLoad({shopId:item.shopId}); //或者其它操作
					}
				})
			}
		},
		onReachBottom() {
			this.page++
			this.getAll()
		},
	};
</script>

<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		padding-bottom: 200rpx;
		padding-top: 90rpx;
		background: #fff;
	}

	.tabs {
		position: fixed;
		top: 54px;
		width: 100%;
		background: #fff;
		padding: 25rpx;
		box-sizing: border-box;
		box-shadow: 0px 4rpx 24rpx 0rpx rgba(51, 51, 51, 0.1800);
	}

	.detail {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		height: 164rpx;
		border-bottom: 1rpx solid #eee;
		padding: 25rpx;

		.avatar {
			width: 114rpx;
			height: 114rpx;
			border: 4rpx solid #F1F1F1;
			border-radius: 50%;
		}

		.content {
			flex: 1;
			max-width: 500rpx;

			view:first-child {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				padding-bottom: 10rpx;
			}

			view:last-child {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.set-store {
			width: 44rpx;
			height: 38rpx;
		}

	}

	.load-more {
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
		margin-top: 20rpx;
	}
</style>
